﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Example10.aspx.cs" Inherits="Chapter21.Example10" %>

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>代码清单 21-10 创建 CSS 表格布局</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut ico" href="images/favicon.ico" type="image/x-ico" />
    <style type="text/css">
        #table {
            display: table;
        }

        div.row {
            display: table-row;
            background-color: lightgray;
        }

        p {
            display: table-cell;
            border: thin solid black;
            padding: 15px;
            margin: 15px;
        }

        img {
            float: left;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div id="table">
        <div class="row">
            <p id="first">
                There are lots of different kinds of fruit - there are you over 500 varieties
                of banana alone. By the time we add the countless types of apples, oranges,
                and other well-known fruit, we are faced with thousands of choices.
            </p>
            <p id="second">
                One of the most interesting aspects of fruit is the variety available in
                each county. I live near London, in an area which is know for
                its apples. 
            </p>
            <p>
                When travelling in Asia, I was struck by how many different
                kinds of banana were available - many of which had unique flavours and
                which were only avaiable within a small region.
            </p>
        </div>
        <div class="row">
            <p>
                This is an apple.<img src="images/apple.png" alt="apple" />
            </p>
            <p>
                This is an banana.<img src="images/banana.png" alt="banana" />
            </p>
            <p>
                No picture here
            </p>
        </div>
    </div>
</body>
</html>
